<template name="zy-search">
	<view>
		<om-topsearch @confirm="searchStart" @input="searchStart" @cancel="cancel" v-model="searchText" :focus="isFocus"></om-topsearch>
		<view v-if="searchText === ''">
			<view :class="'s-' + theme" v-if="hList.length > 0">
				<view class="header">
					历史记录
					<cmd-icon color="#888" size="14" class="search-close" type="trash" @click="delhistory"></cmd-icon>
				</view>
				<view class="list">
					<view class="list-son" v-for="(item, index) in hList" :key="index"><view class="cu-tag radius bg-green light" @click="keywordsClick(item)">{{ item.text }}</view></view>
				</view>
			</view>
			<view :class="'wanted-' + theme" v-if="showWant">
				<view class="header">猜你想搜的</view>
				<view class="list">
					<view v-for="(item, index) in hotList" :key="index"><view class="cu-tag radius bg-orange light" @click="keywordsClick(item)">{{ item.text }}</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUrl } from '@/static/js/common.js';
export default {
	name: 'zy-search',
	props: {
		//历史搜索的缓存KEY
		cacheKey:{
			type: String,
			default: ''
		},
		isFocus: {
			//是否自动获取焦点
			type: Boolean,
			default: false
		},
		theme: {
			//选择块级显示还是圆形显示
			type: String,
			default: 'block'
		},
		showWant: {
			//是否展示推荐菜单
			type: Boolean,
			default: false
		},
		hotList: {
			//推荐列表数据
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			searchText:"",
			hList: uni.getStorageSync(this.cacheKey) //历史记录
		};
	},
	methods: {
		searchStart: function(e) {
			//触发搜索
			let _this = this;
			_this.$emit('getSearchText', e.value);
		},
		cancel(e){
			this.$emit('cancel', e);
		},
		addhistory(menu){
			if(!menu){
				return
			}
			let _this = this;
			uni.getStorage({
				key: _this.cacheKey,
				success(res) {
					let list = res.data;
					if (list.length > 5) {
						for (let item of list) {
							if (item.text == menu.text) {
								return;
							}
						}
						list.pop();
						list.unshift(menu);
					} else {
						for (let item of list) {
							if (item.text == menu.text) {
								return;
							}
						}
						list.unshift(menu);
					}
					_this.hList = list;
					uni.setStorage({
						key: _this.cacheKey,
						data: _this.hList
					});
				},
				fail() {
					_this.hList = [];
					_this.hList.push(menu);
					uni.setStorage({
						key: _this.cacheKey,
						data: _this.hList
					});
				}
			});
		},
		keywordsClick(item) {
			var url = getUrl((item.h5url || item.url),{
				title: item.text,
				code: item.code
			})
			uni.navigateTo({
				url: url
			})
		},
		delhistory() {
			//清空历史记录
			this.hList = [];
			uni.setStorage({
				key: this.cacheKey,
				data: this.hList
			});
		}
	}
};
</script>

<style lang="less" scoped>
.search {
	width: 640upx;
	margin: 30upx auto 0;
	position: relative;
	input {
		background-color: #f7f7f7;
		padding: 10upx 74upx;
		font-size: 28upx;
		border-radius: 50upx;
	}
	.voice-icon {
		width: 36upx;
		height: 36upx;
		padding: 16upx 20upx 16upx 0;
		position: absolute;
		left: 16upx;
		top: 4upx;
		z-index: 10;
	}
	.search-icon {
		width: 36upx;
		height: 36upx;
		padding: 16upx 20upx 16upx 0;
		position: absolute;
		right: 0;
		top: -2upx;
		z-index: 10;
	}
}
.s-block {
	margin-top: 0;
	.header {
		font-size: 32upx;
		padding: 30upx;
		position: relative;
		.search-close {
			width: 36upx;
			height: 36upx;
			padding: 10upx;
			position: absolute;
			right: 40upx;
			top: 24upx;
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		.list-son {
			width: 50%;
			// color: #8a8a8a;
			box-sizing: border-box;
			text-align: center;
			padding: 20upx 0;
			// border-top: 2upx solid #fff;
			// border-left: 2upx solid #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			// background-color: #f7f7f7;
			view{
				width:60%;
				font-size: 28upx;
			}
		}
	}
}
.s-circle {
	margin-top: 0;
	.header {
		font-size: 32upx;
		padding: 30upx;
		border-bottom: 2upx solid #f9f9f9;
		position: relative;
		image {
			width: 36upx;
			height: 36upx;
			padding: 10upx;
			position: absolute;
			right: 40upx;
			top: 24upx;
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx 20upx;
		view {
			padding: 8upx 30upx;
			margin: 20upx 30upx 0 0;
			font-size: 28upx;
			color: #8a8a8a;
			// background-color: #f7f7f7;
			box-sizing: border-box;
			text-align: center;
			border-radius: 20upx;
		}
	}
}
.wanted-block {
	margin-top: 0;
	.header {
		font-size: 32upx;
		padding: 30upx;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		view {
			width: 50%;
			// color: #8a8a8a;
			font-size: 28upx;
			box-sizing: border-box;
			text-align: center;
			padding: 20upx 0;
			// border-top: 2upx solid #fff;
			// border-left: 2upx solid #fff;
			// background-color: #f7f7f7;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
.wanted-circle {
	margin-top: 0;
	.header {
		font-size: 32upx;
		padding: 30upx;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx 20upx;
		view {
			padding: 8upx 30upx;
			margin: 20upx 30upx 0 0;
			font-size: 28upx;
			color: #8a8a8a;
			background-color: #f7f7f7;
			box-sizing: border-box;
			text-align: center;
			border-radius: 20upx;
		}
	}
}
</style>
